<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询客户信息</title>
    <link href="/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"/>
    <script src="/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/jquery/jquery.datepick.css">
    <script type="text/javascript"  src="/jquery/jquery.datepick.js"></script>
    <script type="text/javascript"  src="/jquery/jquery.datepick-zh-CN.js"></script>
    <script type="text/javascript">
        $(function () {
            //yy-mm-dd 对应: java的 yyyy-MM-dd
            $("#start,#end").datepick({
                dateFormat: "yy-mm-dd"
            });


            //getJSON()
            $("tbody").empty();
            $.getJSON("/QueryAllByAjaxServlet2",function(data){
                // console.log(data);
                 for(var i = 0; i<data.length;i++){
                     var trStr =" <tr>" +
                         "                <td>"+data[i].cid+"</td>" +
                         "                <td>"+data[i].cname+"</td>" +
                         "                <td>"+data[i].sex+"</td>" +
                         "                <td>"+data[i].brithday+"</td>" +
                         "                <td>"+data[i].cellphone+"</td>" +
                         "                <td>"+data[i].email+"</td>" +
                         "                <td>"+data[i].description+"</td>" +
                         "                <td>" +
                         "                    <a class=\"sh\" href=\"javascript:void(0);\">编辑</a>" +
                         "                    <a class=\"sh\" href=\"javascript:void(0);\">删除</a>" +
                         "                </td>" +
                         "            </tr>";

                     $("tbody").append($(trStr));
                 }

            });

        });
    </script>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>客户信息查询</h1>
    </div>
    <div class="row">
        <form class="form-inline" id="myForm">
            <div class="form-group">
                <label for="sex">性别:</label>
                <select class="form-control" id="sex" name="sex">
                    <option>全部</option>/
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>

            </div>
            <div class="form-group">
                <label for="start">出生日期</label>
                <input type="text" class="form-control" id="start" name="startTime" readonly/>
            </div>
            <div class="form-group">
                <label>到</label>
                <input type="text" class="form-control" id="end" name="endTime" readonly/>
            </div>
            <button type="submit" class="btn btn-success">查询</button>
        </form>
    </div>
    <div style="margin-top:20px;" class="table-bordered">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出生日期</td>
                <td>手机号码</td>
                <td>邮箱</td>
                <td>描述</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>男</td>
                <td>1988-09-21</td>
                <td>18099212122</td>
                <td>zhangsan@126.com</td>
                <td>xxxx</td>
                <td>
                    <a class="sh" href="javascript:void(0);">编辑</a>
                    <a class="sh" href="javascript:void(0);">删除</a>
                </td>
            </tr>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>男</td>
                <td>1988-09-21</td>
                <td>18099212122</td>
                <td>zhangsan@126.com</td>
                <td>xxxx</td>
                <td>
                    <a class="sh" href="javascript:void(0);">编辑</a>
                    <a class="sh" href="javascript:void(0);">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div style="width:400px;margin:10px auto;">
            <ul class="pagination">
                <li class="disabled">
                    <a href="#">
                        <span>首页</span>
                    </a>
                </li>
                <li class="disabled">
                    <a href="#">
                        <span>上一页</span>
                    </a>
                </li>
                <li class="active">
                    <a href="#">1
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>下一页</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>最后一页</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>